<template>
    <DownArrowScreen v-model:value="queryParams" type="product" @onSubmit="onRefresh">
    </DownArrowScreen>
    <div class="product_selection_list">
        <van-pull-refresh style="height: 100%;" v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="list.length == 0">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无数据</div>
                    </div>
                </template>
                <div class="product_list_van_list">
                    <div v-for="item in list" :key="item.id">
                        <ListItems :row="item" :status="3" @click="handleGetDetails(item.id)" />
                        <div class="list_line"></div>
                    </div>

                </div>
            </van-list>
        </van-pull-refresh>
    </div>
    <category :isShow="isShow" @leftClick="leftClick" @onSubmit="onSubmit" v-model:value="queryParams.categoryId" />
</template>

<script setup lang="ts">
import { getStockPcList } from '@/api/productHome/index'
import { ref, defineExpose, onMounted, onUnmounted, onActivated } from 'vue';
import { getEnvValue } from "@/utils/index";
import { useRouter, useRoute } from 'vue-router';
import category from '@/components/category/index.vue'
import DownArrowScreen from '@/views/productSelection/components/downArrowScreen.vue'
import ListItems from '@/views/productSelection/components/listItemsNewui.vue'
const route = useRoute();
const router = useRouter();
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    // 商品名称搜索
    styleName: '',
    // 时间区间
    startTime: '',
    // 默认进来为待处理状态
    status: '',
    // 招商品类
    recruiterDeptId: ''
});
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
const isShow = ref<any>(false)
const vantListScrollTop = ref<any>(0) // 列表滚动高度

// 限制连续刷新数据重复问题
const refreFlag = ref(true)

/** 获取详情 */
const handleGetDetails = (id: string) => {
    router.push({
        path: `/warehouseApproval/${id}`,
        query: {
            status: queryParams.value.status
        }
    })
};
/** 查询商品列表 */
const getList = async () => {
    var res = await getStockPcList(queryParams.value);
    res.rows.forEach(async (item) => {
        if (item.productImage) {
            item.productImages = getEnvValue("VITE_APP_PIC_URL") + item.productImage.split(",")[0]
        } else {
            item.productImages = "";
        }
    });
    setTimeout(() => {
        refreFlag.value = true
        // 空数据 停止加载
        if (res.rows.length == 0) {
            list.value = [];
            finished.value = true;
            return;
        }
        // 有数据 赋值列表 加载状态结束
        res.rows.forEach((item) => {
            finished.value = false;
            list.value.push(item);
        });
        loading.value = false;
        refreshing.value = false;
        // 如果list长度大于等于总数据条数，数据全部加载完成
        if (list.value.length >= res.total) {
            finished.value = true; //结束加载
        }
    }, 400);
};
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};
// 类目导航返回
const leftClick = () => {
    isShow.value = false
}
// 搜索查询
const onSubmit = () => {
    isShow.value = false
    onRefresh()
}
// 点击搜索调用函数
const init = (name: string) => {
    queryParams.value.styleName = name
    onRefresh()
}

defineExpose({ init })
onMounted(() => {
    queryParams.value.status = route.query?.status || ''
    functionScroll('init')
})
// 在组件卸载前移除事件监听器
onUnmounted(() => {
    functionScroll('delete')
});
onActivated(() => {
    functionScroll('black')
})
// 缓存组件中保存页面浏览位置方法
const functionScroll = (type: string) => {
    const dom: any = document.querySelector('.van-pull-refresh')
    if (type === 'init') {
        dom?.addEventListener('scroll', (e: any) => {
            vantListScrollTop.value = e.target.scrollTop
        })
    } else if (type === 'delete') {
        dom?.removeEventListener('scroll', () => { });
    } else if (type === 'black') {
        dom.scrollTop = vantListScrollTop.value
    }
}
</script>
<script lang="ts">
export default { name: 'CarefulHome' }
</script>

<style lang="less" scoped>
.product_selection_list {
    flex: 1;
    min-height: 0;
    background-color: #F6FAFF;
}

:deep(.van-pull-refresh) {
    overflow: scroll;
}

.approval_screen_img {
    width: 40px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;

    .van-image {
        width: 16px;
        height: 16px;
    }
}

.list_line {
    height: 8px;
    background: #F6FAFF;
}
</style>